<template>
  <div>
    
    <my-swipe :list="lunbo" :isfull="true"></my-swipe>
    <!-- 九宫格 -->
    <ul class="mui-table-view mui-grid-view mui-grid-9">
      <li
        class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"
        v-for="item in gridList"
        :key="item.id"
      >
        <router-link :to="item.to">
          <span :class="item.icon"></span>
          <div class="mui-media-body">{{item.content}}</div>
        </router-link>
      </li>
    </ul>
  </div>
</template>
<script>
import { Toast } from "mint-ui";
import swipe from '../common/Swipe.vue'
export default {
  data() {
    return {
      lunbo: [],
      gridList: [
        { id: 0, to: "/home/newList", icon: "mui-icon mui-icon-home", content: "新闻" },
        { id: 1, to: "/home/photolist", icon: "mui-icon mui-icon-email", content: "图片" },
        { id: 2, to: "/home/goodsList", icon: "mui-icon mui-icon-chatbubble", content: "商店" },
        { id: 3, to: "", icon: "mui-icon mui-icon-phone", content: "手机" },
        { id: 4, to: "", icon: "mui-icon mui-icon-search", content: "搜索" },
        { id: 5, to: "", icon: "mui-icon mui-icon-gear", content: "设置" }
      ]
    };
  },
  created() {
    this.getLunBoTu();
  },
  methods: {
    getLunBoTu() {
      this.$http
        .get("api/getlunbo")
        .then(res => {
          if (res.data.status === 0) {
            this.lunbo = res.data.message;
          } else {
            Toast("获取轮播图失败");
          }
        });
    }
  },
  components: {
    "my-swipe": swipe
  }
};
</script>
<style lang="scss" scoped>
.mui-grid-view.mui-grid-9{
  background-color: #fff;
  border: none;
}
.mui-grid-view.mui-grid-9 .mui-table-view-cell{
  border: none;
}
.mui-grid-view.mui-grid-9 .mui-media .mui-icon{
  font-size: 4rem
}
</style>
